<script setup lang="ts">
import { qualityDataApi } from '~/api'
import BlockHead from './block-head.vue'

const realTimeData = ref<qualityDataApi.QualityData>()
const recentlyData = ref<qualityDataApi.QualityData[]>([])

function isOk(numstr: string) {
  const num = Number.parseFloat(numstr)
  return num >= 98
}

onMounted(async () => {
  try {
    realTimeData.value = (await qualityDataApi.getRealTimeQualityData()).data
  }
  catch {}
  try {
    recentlyData.value = (await qualityDataApi.pageQueryQualityData({
      pageNumber: 1,
      pageSize: 6,
    })).data?.records ?? []
  }
  catch (error) {}
})
</script>

<template>
  <div class="h-full w-full flex flex-auto flex-col">
    <BlockHead is-big title="质量数据" />
    <div class="block-body w-full flex flex-auto flex-col gap-3 overflow-auto px-3 py-2">
      <template v-if="false">
        <h2 class="my-0 !text-lg">
          实时质量监控
        </h2>
        <table v-if="realTimeData" class="banma-table w-full table-fixed">
          <tbody>
            <tr>
              <th>批次号</th>
              <td colspan="5">
                {{ realTimeData?.batchCode }}
              </td>
            </tr>
            <tr>
              <th>合格</th>
              <th>不合格</th>
              <th>合格比例</th>
              <th>PV检测合格</th>
              <th>PV检测不合格</th>
              <th>合格比例</th>
            </tr>
            <tr>
              <td>{{ realTimeData?.passNum }}</td>
              <td>{{ realTimeData?.unpassNum }}</td>
              <td :class="{ 'text-red-5': !isOk(realTimeData?.passRate ?? '') }">
                {{ realTimeData?.passRate }}
              </td>
              <td>{{ realTimeData?.pvPassNum }}</td>
              <td>{{ realTimeData?.pvUnpassNum }}</td>
              <td :class="{ 'text-red-5': !isOk(realTimeData?.pvPassRate ?? '') }">
                {{ realTimeData?.pvPassRate }}
              </td>
            </tr>
          </tbody>
        </table>
        <div v-else class="py-20 text-center opacity-50">
          暂无数据
        </div>
        <h2 class="my-0 !text-lg">
          近期批次历史质量监控
        </h2>
      </template>
      <div v-if="recentlyData.length > 0" class="flex-auto overflow-auto">
        <table v-for="item in recentlyData" :key="item.id" class="banma-table w-full table-fixed">
          <tbody>
            <tr>
              <th>批次号</th>
              <td colspan="5">
                {{ item?.batchCode }}
              </td>
            </tr>
            <tr>
              <th>合格</th>
              <th>不合格</th>
              <th>合格比例</th>
              <th>PV检测合格</th>
              <th>PV检测不合格</th>
              <th>合格比例</th>
            </tr>
            <tr>
              <td>{{ item?.passNum }}</td>
              <td>{{ item?.unpassNum }}</td>
              <td :class="{ 'text-red-5': !isOk(item?.passRate ?? '') }">
                {{ item?.passRate }}
              </td>
              <td>{{ item?.pvPassNum }}</td>
              <td>{{ item?.pvUnpassNum }}</td>
              <td :class="{ 'text-red-5': !isOk(item?.pvPassRate ?? '') }">
                {{ item?.pvPassRate }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else class="py-20 text-center text-center opacity-50">
        暂无数据
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.banma-table {
  border: 0;
  th,td {
    text-align: left;
    padding: 0.5rem 1rem;
  }
  td {
    opacity: 0.7;
  }
  tr {
    background-color: rgba(54, 154, 254, 0.2);
  }
}
</style>
